<template>
	<view class="f-f-c p20">
		<u-navbar
		:autoBack="true" bgColor="#fff"
		leftIconColor='#fff'
		:titleStyle="{ color: '#000'}"
		 title="动态" rightText='' :border="false" :placeholder="true">
			<view slot="left"></view>
			 
		</u-navbar>
		<view class="c3">热门活动</view>
		<view class="f-w-b">
			<view class="cf bg1 f-f-c-cl pl40" @click="navTo('/pages/activities/activities')">
				<span>线下活动</span>
				<span class="c24 mt10  f28">线下环保公益活动</span>
			</view>
			<view class="cf bg2 f-f-c-cl pl40" @click="navTo('/pages/growthCenter/growthCenter')">
				<span>成长中心</span>
				<span class="c24 mt10  f28">做任务领取奖励</span>
			</view>
			<view class="cf bg3 f-f-c-cl pl40" @click="navTo('/pages/science/science')">
				<span>环保科普</span>
				<span class="c24 mt10  f28">科普环保知识</span>
			</view>
			<view class="cf bg4 f-f-c-cl pl40" @click="show = true" >
				<span>客服中心</span>
				<span class="c24 mt10  f28">专业服务答疑</span>
			</view>
		</view>
		<view class="c3">环保动态</view>
		<view class="" v-if='newList.length > 0'>
			<view class="dynamic-item b-rd b-s p20 mt20" v-for="item,ix in newList" :key="ix" 
			@click="navTo('/pages/science/details?id='+ item.id)">
				<!-- 图片在左，内容在右 -->
				<view class="dynamic-img" v-if="item.imgUrl">
					<u--image :showLoading="true" :src="item.imgUrl" width="140rpx" height="140rpx" style="border-radius: 8rpx;" />
				</view>
				<view class="dynamic-content">
					<span class="c3 mb20">{{item.title}}</span>
					<span class="c9 f28 multi-ellipsis-2">{{ stripHtml(item.content) }}</span>
				</view>
			</view>
		</view>
		<u-empty v-else />
		<u-popup :show="show" @close="close" @open="open" mode="center" bgColor='transparent'>
			<view @click="show = false">
				<image :src="kefuimg" mode="widthFix"></image>
			</view>
		</u-popup>
		<custom-tabbar :activeIndex="1" />
	</view>
</template>


<script>
	 	import customTabbar  from '@/components/customTabbar.vue'
	export default {
		onShareAppMessage() {
		  return {
		    title: '清能科技回收',
		    path: '/pages/category/category',
		    imageUrl: '/static/huishou/logo.png'
		  }
		},
		onShareTimeline() {
		  return {
		    title: '清能科技回收',
		    query: '', // 可选参数
		       imageUrl: '/static/huishou/logo.png'
		  }
		},
		components: {
		
				customTabbar
		},
		data() {
			return {
				show:false,
				newList:[
				 ],
				kefuimg:"",
			}
		},
		onReachBottom() {
			
		},
		onReady() {
			
		},
		onLoad(){
			this.getkefu()
			this.getnewsList()
		},
		onShow() {
			
		},
		methods: {
			 open() {
				  // console.log('open');
			},
			close() {
			  this.show = false
			  // console.log('close');
			},
			getkefu(){
				
				var kefuimg  = uni.getStorageSync('kefuimg');
				 this.kefuimg =  kefuimg.configValue;
				// this.$api.request('get', `labour/app/1`).then(res => {
				//  console.log(res.data,'res')W
				//  this.kefuimg = res.data.wechatUrlWW
				 
				// }).catch(err => {
				//   // this.$api.msg('请求失败，请稍后再试')
				// })
			},
			getnewsList(){
				let that = this
				this.$api.request('get', 'news/app/appList', {}).then(res => {
				  console.log(res.rows)
				  this.newList = res.rows
				}).catch(err => {
				  this.$api.msg('请求失败，请稍后再试')
				})
			},
			stripHtml(html) {
				if (!html) return '';
				return html.replace(/<[^>]+>/g, '');
			}
			
	}
	}
</script>

<style lang='scss'>
	page,
	.content {
		min-height: 50%;
		background-color: #f8f8f8;
	}

	.number-box{
		width: 73px;
	}

	.actived{
		font-size: 28rpx;
		color:#2AAC34;
		border-bottom:#2AAC34 solid 8rpx;
	}

	.line-orange::after, .lines-orange::after {
	  border-color: #FC6620;
	}

	.solid-bottom::after {
	  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.content {
		display: flex;
	}
	.left-aside {
		flex-shrink: 0;
		width: 150upx;
		height: 100%;
		background-color: #f8f8f8;
	}
	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: 28upx;
		color: $font-color-base;
		position: relative;
		&.active{
			color: $base-color;
			background: #fff;
			&:before{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 30upx;
				width: 8upx;
				background-color: $base-color;
				opacity: .8;
			}
		}
	}

	.right-aside{
		flex: 1;
		overflow: hidden;
		padding-left: 20upx;
	}
	.s-item{
		display: flex;
		align-items: center;
		height: 70upx;
		padding-top: 8upx;
		font-size: 28upx;
		color: $font-color-dark;
	}
	.t-list{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding-top: 12upx;
		&:after{
			content: '';
			flex: 99;
			height: 0;
		}
	}
	.t-item{
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 176upx;
		font-size: 26upx;
		color: #666;
		padding-bottom: 20upx;

		image{
			width: 140upx;
			height: 140upx;
		}
	}
	.bg1,.bg2,.bg3,.bg4{
		width: 338rpx;
		height: 164rpx;
		background: none;
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/c1.png');
		background-size: 100% 100%;
		/* box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(0,0,0,0.1); */
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
	}
	.bg2{
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/c2.png');
	}
	.bg3{
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/c3.png');
	}
	.bg4{
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/c4.png');
	}
	.dynamic-item {
		display: flex;
		align-items: center; // 垂直居中
		background: #fff;
		margin-bottom: 20rpx;
	}
	.dynamic-img {
		flex-shrink: 0;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.dynamic-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.multi-ellipsis-2 {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
	}
</style>
